<template>
	<div id="root" :class="'root-' + $route.name">
		<template v-if="$route.name == 'login'">
			<router-view></router-view>
		</template>
		<template v-else>
			<div class="root-header">
				<page_header />
			</div>
			<div class="root-inner">
				<div class="root-left scrollbar" style="width: 220px;">
					<page_menu />
				</div>
				<div class="root-right">
					<div class="root-right-breadcrumb">
						<page_breadcrumb />
					</div>

					<div class="root-right-inner">
						<router-view></router-view>
					</div>
				</div>
			</div>
		</template>
	</div>
</template>

<script>
import page_header from "@/components/page/page_header.vue";
import page_menu from "@/components/page/page_menu.vue";
import page_breadcrumb from "@/components/page/page_breadcrumb.vue";
import {
	mapState
} from "vuex";
export default {
	components: {
		page_header,
		page_menu,
		page_breadcrumb,
	},
	data() {
		return {};
	},
	created() {
		this.initialization()
		let token = localStorage.getItem("token");
		if (!token && this.$route.name != 'login') {
			this.$router.push('/login')
			return
		} else {
			this.$store.dispatch("appInit", {
				callback: this.initCallback
			}); //重新初始化
		}
	},

	methods: {
		initialization() {
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "manager_getUserInfo",
				}
			}).then((res) => {
				if (res.code == 200) {

					if (res.data.roleInfo == null) {
						alertErr('请重新登录！！！')
						this.$router.push('/login')
					}
				} else {
					alertErr(res.msg)
				}
			});
		},
		initCallback(data) {
			if (data.id) {

			} else {
				this.$router.push('/login')
			}
		},
		handleOpen(key, keyPath) {
			console.log("handleOpen", key, keyPath);
		},
		handleSelect(key, keyPath) {
			let key_str = keyPath[keyPath.length - 1];
			let route = this.key_map[key_str];

			console.log("handleSelect key", key);
			console.log("handleSelect keyPath", keyPath);
			console.log("handleSelect route", route);

			// debugger;
			this.$router.push("/" + route);
		},

		handleClose(key, keyPath) {
			console.log(key, keyPath);
		},

		root_click() {
			console.log("点击内容区, 关闭选项弹窗");
			// this.$store.commit('vuex_closePop');
			// this.vuex_closePop();
		},
	},
};
</script>

<style lang="less">
* {
	box-sizing: border-box;
	list-style: none;
	padding: 0;
	margin: 0;
}

body {
	background-color: #fff;
	font-size: 14px;
	text-align: left;
}

#root {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	background: #fff;
	font-size: 12px;

	&.root-login {
		padding-top: 0 !important;
	}

	/*
  height: 100vh;
  overflow-y: scroll;

  */
}

/deep/ .van-checkbox__icon--checked .van-icon {
	// background-color: @lh_green;
	// border-color: @lh_green;
}

/deep/ .van-checkbox__icon--checked .van-icon {
	// background-color: @lh_green;
	// border-color: @lh_green;
}

/deep/ .van-tabs__line {
	// background-color: @lh_green;
}

.el-textarea__inner:focus {
	// border-color: #e4393c !important;
}

/**用户信息 */
.page-userinfo {
	.el-radio__input.is-checked .el-radio__inner {
		// background: #e4393c;
		// border-color: #e4393c;
	}

	.el-radio__input.is-checked+.el-radio__label {
		color: #000;
	}
}

/*收藏夹 */
.page-modal-shoucangjia {
	.el-radio__input.is-checked .el-radio__inner {
		// background: #e4393c;
		// border-color: #e4393c;
	}

	.el-radio__input.is-checked+.el-radio__label {
		color: #000;
	}
}

.el-radio__input.is-checked .el-radio__inner {
	background: #e4393c !important;
	border-color: #e4393c !important;
}

.el-radio__input.is-checked+.el-radio__label {
	color: #000 !important;
}

.el-checkbox__input.is-focus .el-checkbox__inner {
	border-color: #e4393c !important;
}

.el-checkbox__input.is-checked+.el-checkbox__label {
	color: #e4393c !important;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
	background: #e4393c !important;
	border-color: #e4393c !important;
}

.pagination-box {
	text-align: center;
}

.van-toast {
	z-index: 100000000000000000000000 !important;
}

.el-button--primary {}

.el-button--default:focus,
.el-button--default:hover {}

#app .has-emoji img {
	width: 45px;
}

.empty {
	min-height: 10vh;
	line-height: 10vh;
	text-align: center;
}

a {
	text-decoration: none;
}
</style>

<style lang="less" scoped>
#root {
	padding-top: 70px;
}

.root-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 70px;
	z-index: 100;
}

.root-inner {
	height: calc(100vh - 70px);
	.fbs();
}

.root-left {
	width: auto;
	height: calc(100vh - 70px);
	overflow-y: auto;
	background: #313133;
	background: #fff;
	width: 150px;
	width: 210px;
	width: 180px;

	&.scrollbar {
		overflow-y: auto;

		&::-webkit-scrollbar-thumb {
			border-radius: 3px;
			border: 5px solid #409eff;
			background: #fff;
		}

		&::-webkit-scrollbar {
			width: 5px;
			height: 0px;
		}
	}
}

.root-right {
	background: #f8f8f8;
	background: #ececec;
	flex: 1;
	height: calc(100vh - 70px);
	overflow-y: auto;

	text-align: left;

	&::-webkit-scrollbar-thumb {
		border-radius: 5px;
		border: 8px solid #409eff;
		background: #fff;
	}

	&::-webkit-scrollbar {
		width: 8px;
		height: 0px;
	}

	.root-right-breadcrumb {
		position: sticky;
		top: 0px;
		z-index: 10;
		padding: 10px;

		// margin-top: -10px;
		// margin-bottom: -10px;
		// margin-left: -10px;
		// margin-right: -10px;
		// padding: 10px;
		background: #ececec;
	}

	.root-right-inner {
		padding: 0 10px;
	}
}
</style>

<style lang="less">
.router-link-exact-active {
	color: #409eff;
}

// 富文本编辑器
.tox-tinymce-aux {
	z-index: 100001 !important;
}

.tox .tox-dialog-wrap {
	z-index: 110001 !important;
}


.el-table th:last-child {
	text-align: center;
}
</style>